import * as THREE from 'three'
import Experience from './Experience'
import Sizes from '../Utils/Sizes'
import Camera from './Camera'
export default class Renderer {
  experience!: Experience
  sizes!: Sizes
  scene!: THREE.Scene
  camera!: Camera
  canvas!: HTMLCanvasElement
  renderer!: THREE.WebGLRenderer
  constructor() {
    this.experience = new Experience()
    const { scene, sizes, canvas, camera } = this.experience
    this.sizes = sizes
    this.scene = scene
    this.canvas = canvas
    this.camera = camera
    console.log(this.camera, this.camera.perspectiveCamera)
    this.setRenderer()
  }
  setRenderer() {
    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      antialias: true
    })
    this.renderer.useLegacyLights = true
    this.renderer.outputEncoding = THREE.sRGBEncoding
    this.renderer.toneMapping = THREE.CineonToneMapping
    this.renderer.toneMappingExposure = 1.75
    this.renderer.shadowMap.enabled = true
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
    const { width, height, pixelRatio } = this.sizes
    this.renderer.setSize(width, height)
    this.renderer.setPixelRatio(pixelRatio)
  }
  resize() {
    const { width, height, pixelRatio } = this.sizes
    this.renderer.setSize(width, height)
    this.renderer.setPixelRatio(pixelRatio)
  }
  update() {
    this.renderer.render(this.scene, this.camera.perspectiveCamera)
  }
}
